<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
        <el-select v-model="region" placeholder="选择排单" @change="find">
            <el-option v-for="m in produceOrder "
                       :key="m.productStatus"
                       :lable="m.productStatus"
                       :value="m.productStatus"
                      ></el-option>
        </el-select>

    <el-table
            :data="produceOrder"
            style="width: 100%">
        <el-table-column
                label="序号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产计划编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productPlanNo }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="型号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="责任产线"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productLineId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产数量"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="开始生产日期"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productPlanTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="结束生产日期"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productPlanOvertime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.remark }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productStatus }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="find(scope.row)">设置排单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="produceOrder.total">
        </el-pagination>
        <el-dialog title="设置排单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                    <el-input v-model="form.orderId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生产线" :label-width="formLabelWidth">
                    <el-input v-model="form.productLineId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生产编号" :label-width="formLabelWidth">
                    <el-input v-model="form.productPlanNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生产时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.productPlanTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            produceOrder: [],
            formLabelWidth: '120px',
            ss: '',
            form:{orderId:'',productLineId:'',productPlanNo:'',productPlanTime:''},
            current:0,
            dialogFormVisible: false,
            region:null
        },
        methods: {
            page: function () {
                axios.get('/orders/page/'+this.current).then(res => {
                    this.produceOrder = res.data.data
                })
            },
            handleCommand() {
            },
            find(){
                axios.get('/order/'+this.region).then(res =>{
                    this.produceOrder = res.data
                })
            },
            update(){
              axios.put('/order',this.form).then(res =>{
                  this.dialogFormVisible=false
                  this.page();
              })
            },
            find(row){
                this.form=row;
                this.dialogFormVisible=true;
            },
            handleCurrentChange(row) {
                this.current=row
                this.page()
            }
        },
        mounted() {
            this.page()
        }
    })
</script>
</body>
</html>